import React, {useState} from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableOpacity,
  SafeAreaView,
  Alert,
} from 'react-native';

// 模拟通知数据
const notifications = [
  {
    id: 1,
    title: '系统通知',
    content: '系统更新提醒',
    time: '2025-04-22 10:00',
    read: false,
  },
  {
    id: 2,
    title: '消息通知',
    content: '您有一条新消息',
    time: '2025-04-22 11:00',
    read: false,
  },
  {
    id: 3,
    title: '活动通知',
    content: '新活动上线啦',
    time: '2025-04-22 12:00',
    read: false,
  },
];

const NotificationPage = () => {
  const [notificationList, setNotificationList] = useState(notifications);

  const markAsRead = id => {
    const newList = notificationList.map(item => {
      if (item.id === id) {
        return {...item, read: true};
      }
      return item;
    });
    setNotificationList(newList);
  };

  const deleteNotification = id => {
    Alert.alert('确认删除', '你确定要删除这条数据吗？', [
      {
        text: '取消',
        style: 'cancel',
      },
      {
        text: '删除',
        onPress: () => {
          const newList = notificationList.filter(item => item.id !== id);
          setNotificationList(newList);
        },
      },
    ]);
  };

  const markAllAsRead = () => {
    const newList = notificationList.map(item => ({...item, read: true}));
    setNotificationList(newList);
  };

  const renderItem = ({item}) => (
    <View style={[styles.notificationItem, item.read && styles.readItem]}>
      <View style={styles.itemLeft}>
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.content}>{item.content}</Text>
        <Text style={styles.time}>{item.time}</Text>
      </View>
      <View style={styles.itemRight}>
        <TouchableOpacity onPress={() => markAsRead(item.id)}>
          <Text style={styles.actionText}>标记已读</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => deleteNotification(item.id)}>
          <Text style={styles.actionText}>删除</Text>
        </TouchableOpacity>
      </View>
    </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>通知中心</Text>
        <TouchableOpacity onPress={markAllAsRead}>
          <Text style={styles.headerAction}>全部已读</Text>
        </TouchableOpacity>
      </View>
      <FlatList
        data={notificationList}
        renderItem={renderItem}
        keyExtractor={item => item.id.toString()}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  headerAction: {
    color: 'blue',
  },
  notificationItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  readItem: {
    backgroundColor: '#f9f9f9',
  },
  itemLeft: {
    flex: 1,
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  content: {
    fontSize: 14,
    color: '#666',
    marginTop: 4,
  },
  time: {
    fontSize: 12,
    color: '#999',
    marginTop: 4,
  },
  itemRight: {
    flexDirection: 'row',
  },
  actionText: {
    color: 'blue',
    marginLeft: 16,
  },
});

export default NotificationPage;
